import styled from "styled-components";


export const Main = styled.div`

`

export const Comments = styled.div`
  h2{
    font-size: 24px;
    color: #000000;
    span{
      font-size: 14px;
      color: #999999;
    }
  }
  

`

export const CommentsBox = styled.div`
  margin-top: 20px;
  h2{
    font-size: 24px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 20px;
  }
  .comments_item{
    display: flex;
    width: 100%;
    font-size: 14px;
    color: #000000;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ededed;
    >img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .comments_item_info{
      width: 100%;
      .comments_item_info_name,
      .comments_item_info_time{
        color: #999999;
      }
      .comments_item_info_name{
        &:hover{
          color:#3ac27c;
          cursor: pointer;
        }
      }
      .comments_item_info_content{
        margin: 10px 0;
      }
      .comments_item_info_icon{
        &:hover{
          color:#3ac27c;
          cursor: pointer;
        }
      }
    }
    .comments_item_children{
      margin-top: 15px;
      background-color: #f2f2f2;
      padding: 10px 15px;
      display: flex;
      .comments_item_children_left{
        >span{
          color: #3ac27c;
          cursor: pointer;
        }
      }
    }
  }
`